// 个人中心-证书抬头
<template>
  <div class="per_info">
    <div>
      <div class="fs18 fwb pb30">证书抬头</div>
      <ul class="address_list fs16">
        <li>
          <div class="default">默认</div>
          <img src="../assets/static/icon/icon_close.png" class="icon_close" alt="" />
          <div class="flex-box edit_btn fs16">编辑</div>
          <div class="flex-box pb25">
            <div class="info_left">名称：</div>
            <div>Climate Bridge (SHANGHAI)LTD</div>
          </div>
          <div class="flex-box pb25">
            <div class="info_left">地址：</div>
            <div>Block B, Floor 24, Jiangong Mansion,33 Fushan Road, Pudong New Area,Shanghai</div>
          </div>
          <div class="flex-box">
            <div class="info_left">国家：</div>
            <div>China</div>
          </div>
        </li>
        <li>
          <img src="../assets/static/icon/icon_close.png" class="icon_close" alt="" />
          <div class="flex-box edit_btn fs16">编辑</div>
          <div class="flex-box pb25">
            <div class="info_left">名称：</div>
            <div>Climate Bridge (SHANGHAI)LTD</div>
          </div>
          <div class="flex-box pb25">
            <div class="info_left">地址：</div>
            <div>Block B, Floor 24, Jiangong Mansion,33 Fushan Road, Pudong New Area,Shanghai</div>
          </div>
          <div class="flex-box">
            <div class="info_left">国家：</div>
            <div>China</div>
          </div>
        </li>
        <li>
          <img src="../assets/static/icon/icon_close.png" class="icon_close" alt="" />
          <div class="flex-box edit_btn fs16">编辑</div>
          <div class="flex-box pb25">
            <div class="info_left">名称：</div>
            <div>Climate Bridge (SHANGHAI)LTD</div>
          </div>
          <div class="flex-box pb25">
            <div class="info_left">地址：</div>
            <div>Block B, Floor 24, Jiangong Mansion,33 Fushan Road, Pudong New Area,Shanghai</div>
          </div>
          <div class="flex-box">
            <div class="info_left">国家：</div>
            <div>China</div>
          </div>
        </li>
      </ul>
      <a href="javascript:;" class="add_address fs16 ml0"  @click="closePop()">新增收件地址</a>
    </div>
    <Popup :visible="popup" :confirmText="false" :cancleText="false" @close="closePop">
      <div class="name_pop">
        <div class="flex-box name_title flex-between">
          <div class="fs20">选择证书抬头</div>
          <img
            src="../assets/static/icon/icon_close.png"
            class="icon_close"
            @click="closePop()"
            alt=""
          />
        </div>
        <div class="cirticle_info">
          <div class="must fs16 col9 info_title">名称(须用英文填写)</div>
          <input type="text" class="input1" />
          <div class="must fs16 col9 info_title">详细地址(须用英文填写)</div>
          <input type="text" class="input2" />
          <div class="must fs16 col9 info_title">国家(须用英文填写)</div>
          <input type="text" class="input1" />
          <div class="flex-box">
            <div class="fs16 col9 mr30">设为默认证书抬头</div>
            <div class="switch" :class="switchOn ? 'on' : ''" @click="setDefault()"></div>
          </div>
          <div class="save">保存</div>
        </div>
      </div>
    </Popup>
  </div>
</template>
<script>
export default {
  name: "certificate",
  data() {
    return {
      popup: false,
      switchOn: true,
    };
  },
  methods: {
    closePop() {
      this.popup = !this.popup;
    },
    setDefault(){
      this.switchOn = !this.switchOn;
    }
  },
};
</script>
